<!-- Yandex Maps -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&amp;lang=ru-RU" type="text/javascript"></script>

<div id="map" style="width: 100%; height: 600px; position: relative">
	<div class="shadow" style="box-shadow: inset 0 1px 2px #666; position: absolute; top: 0; left: 0; width: 100%; z-index: 100; height: 5px">
		
	</div>
</div>

<?
	$markers = '';

	foreach ($resellers as $key => $item) {
		$full_address = str_replace("\r\n", '', $item->full_address);
		$full_address = str_replace("\n", '', $item->full_address);
		$full_address = addslashes($full_address);
		$color = $item->type == 0 ? 'red' : 'green';

		$markers .= '
			var reseller_'.$key.' = new ymaps.Placemark(['.$item->coordinates.'], {
			    name: "'.HTML::chars($item->title).'",
			    city: "'.HTML::chars($item->city).'",
			    full_address: "'.$full_address.'"
			}, {
			    iconImageHref: "/static/css/images/'.$color.'_marker.png",
			    iconImageSize: [59, 60],
			    iconImageOffset: [-25, -60],
			    iconContentOffset: [0, 0],
			    hideIconOnBalloonOpen: false,
                balloonShadow: false
			});

			myMap.geoObjects.add(reseller_'.$key.');

			reseller_'.$key.'.events.add("click", function(e) {
				e.get("target").balloon.events.add("close", function(){
					e.get("target").options.set({iconImageHref: "/static/css/images/'.$color.'_marker.png", iconImageSize: [59, 60], iconImageOffset: [-25, -60], iconContentOffset: [0, 0]});
					e.get("target").properties.set({iconContent: ""});
				})

				if (e.get("target").balloon.isOpen()) {
					e.get("target").options.set({iconImageHref: "/static/css/images/'.$color.'_marker.png", iconImageSize: [59, 60], iconImageOffset: [-25, -60], iconContentOffset: [0, 0]});
					e.get("target").properties.set({iconContent: ""});
				} else {
					e.get("target").options.set({iconImageHref: "/static/css/images/big_'.$color.'_marker.png", iconImageSize: [118, 120], iconImageOffset: [-55, -120], iconContentOffset: [20, 35]});
					e.get("target").properties.set({iconContent: "<img src=\'/static/uploads/resellers/normal/'.$item->image.'\' />"});
				}
			});

			myCollection_'.$color.'.add(reseller_'.$key.');
		';
	}
?>

<script type="text/javascript">
	var prev = null;
	var prevColor = "";
    ymaps.ready(init);

    function init () {
        var myMap = new ymaps.Map('map', {
            center: [48.66725165752414,66.89441696166311],
            zoom: 5
        });

		myMap.controls.add("zoomControl", { left: 5, top: 5 });
		myMap.behaviors.enable('scrollZoom');

		myCollection_green = new ymaps.GeoObjectCollection();
		myCollection_red = new ymaps.GeoObjectCollection();

		var myBalloonLayout_green = ymaps.templateLayoutFactory.createClass('<div class="balloon_wrapper">$[[my#balloonContentBodyLayout_green]]</div>');
		var myBalloonLayout_red = ymaps.templateLayoutFactory.createClass('<div class="balloon_wrapper">$[[my#balloonContentBodyLayout_red]]</div>');
		var myBalloonContentBodyLayout_green = ymaps.templateLayoutFactory.createClass('<div>$[[my#balloonContentLayout_green]]</div>');
		var myBalloonContentBodyLayout_red = ymaps.templateLayoutFactory.createClass('<div>$[[my#balloonContentLayout_red]]</div>');

		var myBalloonContentLayout_green = ymaps.templateLayoutFactory.createClass(
			'<div class="b_header">' +
				'<div class="b_arrow"></div>' +
	            '<div class="b_name">$[properties.name]</div>' +
	            '<div class="b_city">$[properties.city]</div>' +
	        '</div>' +
	        '<div class="b_content">$[properties.full_address]</div>'
        );

		var myBalloonContentLayout_red = ymaps.templateLayoutFactory.createClass(
			'<div class="b_header red">' +
				'<div class="b_arrow"></div>' +
	            '<div class="b_name">$[properties.name]</div>' +
	            '<div class="b_city">$[properties.city]</div>' +
	        '</div>' +
	        '<div class="b_content">$[properties.full_address]</div>'
        );

        ymaps.layout.storage.add('my#balloonLayout_green', myBalloonLayout_green)
        .add('my#balloonLayout_red', myBalloonLayout_red)
        .add('my#balloonContentBodyLayout_green', myBalloonContentBodyLayout_green)
        .add('my#balloonContentBodyLayout_red', myBalloonContentBodyLayout_red)
        .add('my#balloonContentLayout_green', myBalloonContentLayout_green)
        .add('my#balloonContentLayout_red', myBalloonContentLayout_red);

		myCollection_green.options.set({
			balloonLayout: 'my#balloonLayout_green',
			balloonContentBodyLayout: 'my#balloonContentBodyLayout_green',
            balloonMaxWidth: 300,
            balloonCloseButton: false,
            balloonOffset: [-370, -120]
        });

		myCollection_red.options.set({
			balloonLayout: 'my#balloonLayout_red',
			balloonContentBodyLayout: 'my#balloonContentBodyLayout_red',
            balloonMaxWidth: 300,
            balloonCloseButton: false,
            balloonOffset: [-370, -120]
        });

		myMap.geoObjects.add(myCollection_green).add(myCollection_red);

        <?= $markers ?>
    }
</script>